<script setup lang="ts">
import { delAsk, getActDetail, getAskList, upAct } from "@/api/admin";
import { FileUpload } from "@/components/common/FileUpload/index";
import { router } from "@/router/index";
import { handleDownload } from "@/utils/common";
import { message } from "@/utils/message";
import { ElMessageBox } from "element-plus";
import { onMounted, ref } from "vue";
import { useRoute } from "vue-router";
import { formRules } from "./rule";
defineOptions({
  name: "ActivityEdit"
});

const toPage = page => {
  router.push(page);
};

const detailId = ref<any>("");
const submitForm = ref<any>({
  name: "",
  address: "",
  dateVal: [],
  startTime: "",
  endTime: "",
  activityContent: ""
});
const askList = ref([]);
const ruleFormRef = ref();
const doSubmit = async () => {
  await ruleFormRef.value.validate(async (valid, fields) => {
    if (valid) {
      let newForm = { ...submitForm.value };
      newForm.startTime = newForm.dateVal[0];
      newForm.endTime = newForm.dateVal[1];
      delete newForm.dateVal;
      await upAct(newForm);
      message("保存成功", { type: "success" });
      setTimeout(() => {
        router.go(-1);
        // ruleFormRef.value.resetFields();
      }, 1000);
    }
  });
};

const loadDetail = async () => {
  if (detailId.value) {
    let { data } = await getActDetail({ id: detailId.value });
    if (data.startTime && data.endTime) {
      data.dateVal = [data.startTime, data.endTime];
    }
    submitForm.value = {
      id: detailId.value,
      name: data.name,
      address: data.address,
      dateVal: data.dateVal,
      startTime: "",
      endTime: "",
      activityContent: data.activityContent,
      docJson: data.docJson,
      imageJson: data.imageJson
    };
  }
};

const loadAskList = async () => {
  let params = {
    activityId: detailId.value,
    pageNum: 1,
    pageSize: 500
  };
  let { data } = await getAskList(params);
  let tempFileList = [];
  let tempList = data.records || [];
  tempList.forEach(v => {
    if (v.fileJson) {
      tempFileList = tempFileList.concat(
        JSON.parse(v.fileJson).map(j => {
          j.dataId = v.id;
          return j;
        })
      );
    }
  });
  askList.value = tempFileList;
};

async function handleDelete(row) {
  ElMessageBox.confirm(`是否确认要删除?`, "系统提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
    dangerouslyUseHTMLString: true,
    draggable: true
  }).then(async () => {
    const res = await delAsk(row.dataId);
    if (res.code != 200) return;
    message("删除问卷成功", { type: "success" });
    loadAskList();
  });
}

async function handleDown(item) {
  ElMessageBox.confirm(`是否确认要下载 ${item.name} ?`, "系统提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
    dangerouslyUseHTMLString: true,
    draggable: true
  }).then(async () => {
    handleDownload(item);
  });
}

onMounted(() => {
  const route = useRoute();
  detailId.value = route.query.id;
  loadDetail();
  loadAskList();
});
</script>
<template>
  <div>
    <div class="activity">
      <div class="content">
        <div class="header">
          <div>編輯活動</div>
        </div>
        <div class="detail">
          <el-form
            ref="ruleFormRef"
            :model="submitForm"
            :rules="formRules"
            label-width="50"
          >
            <div class="flex">
              <el-form-item prop="name">
                <div class="w-[300px]">
                  <div style="line-height: 30px" class="font-bold">
                    活動標題
                  </div>
                  <el-input
                    v-model="submitForm.name"
                    placeholder="活動標題"
                    clearable
                  />
                </div>
              </el-form-item>
              <el-form-item prop="dateVal">
                <div class="w-[300px]">
                  <!-- startTime endTime -->
                  <div style="line-height: 30px" class="font-bold">
                    日期與時間
                  </div>
                  <el-date-picker
                    v-model="submitForm.dateVal"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="开始时间"
                    end-placeholder="结束时间"
                    value-format="YYYY-MM-DD"
                    class="!w-[300px]"
                  />
                </div>
              </el-form-item>
              <el-form-item prop="address">
                <div class="w-[300px]">
                  <div style="line-height: 30px" class="font-bold">地點</div>
                  <el-input
                    v-model="submitForm.address"
                    placeholder="地點"
                    clearable
                  />
                </div>
              </el-form-item>
            </div>
            <!-- 相片/影片 活動内容 活動内容 問卷 文件名稱 -->
            <el-form-item prop="imageJson">
              <div>
                <div style="line-height: 30px" class="font-bold">
                  影片或相片
                </div>
                <FileUpload
                  v-model="submitForm.imageJson"
                  :fileType="['mp4', 'png', 'jpg']"
                  :limit="1"
                  :maxSize="20"
                />
              </div>
              <!-- <el-upload
                class="w-full"
                drag
                action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
                multiple
              >
                <img
                  src="@/assets/upload.png"
                  width="60"
                  height="48"
                  class="mb-3"
                />
                <div class="el-upload__text">
                  <em class="!text-[#9dbdba] font-bold">
                    Drag & drop files or Browse
                  </em>
                </div>
              </el-upload> -->
            </el-form-item>
            <el-form-item prop="activityContent">
              <div style="line-height: 30px" class="font-bold">活動内容</div>
              <el-input
                v-model="submitForm.activityContent"
                type="textarea"
                :rows="5"
                placeholder="活動内容"
                clearable
              />
            </el-form-item>
            <el-form-item prop="docJson">
              <div>
                <div style="line-height: 30px" class="font-bold">新增文檔</div>
                <FileUpload
                  v-model="submitForm.docJson"
                  :limit="10"
                  :maxSize="10"
                />
              </div>
            </el-form-item>
            <el-form-item prop="docJson">
              <div>
                <div style="line-height: 30px" class="font-bold">問卷</div>
                <div class="items">
                  <div v-for="item in askList" :key="item" class="item">
                    <div class="name block">
                      {{ item.name }}
                    </div>
                    <img
                      src="@/assets/down.png"
                      class="img"
                      @click="handleDown(item)"
                    />
                    <img
                      src="@/assets/del.png"
                      class="img"
                      @click="handleDelete(item)"
                    />
                  </div>
                  <el-empty
                    v-if="askList.length == 0"
                    description="暂无数据~"
                  />
                </div>
              </div>
            </el-form-item>
            <div class="foot-btn">
              <div class="btn block" @click="doSubmit()">保存</div>
            </div>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.activity {
  width: 80%;
  height: calc(100vh - 230px);
  display: flex;
  border-radius: 0 25px 25px 0;

  .block::before {
    content: "";
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    margin-right: 5px;
    background-color: #9dbdba;
  }
  .block::after {
    content: "";
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    margin-left: 5px;
    background-color: #9dbdba;
  }
  .content {
    flex: 1;
    border: 1px solid #d9d9d9;
    border-radius: 25px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background-color: rgba(255, 255, 255, 0.9);
    .header {
      font-size: 25px;
      font-weight: bold;
      height: 100%;
      height: 102px;
      padding: 30px;
      background-color: #9dbdbab2;
      box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .detail {
      flex: 1;
      padding: 20px;
      overflow-x: auto;
      .foot-btn {
        display: flex;
        justify-content: flex-end;
        .btn {
          color: #9dbdba;
          width: 180px;
          min-height: 62px;
          padding: 10px 15px;
          border: 2px solid #9dbdba;
          border-radius: 8px;
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
        }
      }
      .block::before {
        content: "";
        flex-shrink: 0;
        width: 16px;
        height: 16px;
        margin-right: 5px;
        background-color: #9dbdba;
      }
      .block::after {
        content: "";
        flex-shrink: 0;
        width: 16px;
        height: 16px;
        margin-left: 5px;
        background-color: #9dbdba;
      }
      .items {
        width: 800px;
        color: #9dbdba;
        font-size: 18px;
        font-weight: bold;
        overflow: auto;
        border-radius: 10px;
        overflow: hidden;
        .item {
          display: flex;
          align-items: center;
          margin-bottom: 15px;
        }
        .name {
          width: 100%;
          min-height: 62px;
          padding: 10px 15px;
          border: 2px solid #9dbdba;
          border-radius: 8px;
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
        }
        .img {
          width: 62px;
          height: 62px;
          margin-left: 15px;
          cursor: pointer;
        }
        .item.act {
          color: #409eff;
          border-color: #409eff;
        }
        .item.act::before,
        .item.act::after {
          background-color: #409eff;
        }
      }
    }
  }
}
</style>
